<template>
    <a-layout style="min-height: calc(100vh - 64px - 70px);">
        <a-page-header style="padding: 0.8em 0px 0.8em 0px; background-color: transparent" title="人物详情" sub-title="担当生前事，何计身后评"/>
        <a-layout style="background: #fff">
            <a-layout-content style="padding: 1.5vw;">
                <!-- 人物卡片列表 -->
                <a-row :gutter="[8,8]">
                    <a-col :span="scrollWidth() >= 800 ? 20 : 24">
                        <a-card :loading="personage.loading" class="card">
                            <a-card-meta :title="personage.lastName + personage.firstName" :description="personage.courtesyName ? '字 ' + personage.courtesyName : ''">
                                <template #avatar>
                                    <a-avatar :src="personage.avatar" style="height: 66px; width: 66px;"/>
                                </template>
                            </a-card-meta>
                            <br>
                            <a-typography-paragraph :ellipsis="{rows: 2, expandable: true, symbol: '点此展开'}" :content="personage.introduction"/>
                            <p class="editInfo">最后由 {{personage.updateBy ? personage.updateBy : "未知用户"}} 编辑于 {{personage.updateTime ? personage.updateTime : "未知时间"}}</p>
                        </a-card>
                        <a-typography class="typography" style="border: 1px solid #f0f0f0; border-radius: 8px; margin-top: 8px; padding: 0px 0.8em;">
                            <a-skeleton :loading="personage.loading" :paragraph="{ rows: 4 }">
                                <a-typography-title :level="4" id="baseInfo" style="margin-top: 0.8em">基本信息</a-typography-title>
                                <a-descriptions :column="1" :labelStyle="{'margin-bottom': '0.6em'}">
                                    <a-descriptions-item label="姓">{{personage.lastName}}</a-descriptions-item>
                                    <a-descriptions-item label="名">{{personage.firstName}}</a-descriptions-item>
                                    <a-descriptions-item label="字">{{personage.courtesyName}}</a-descriptions-item>
                                    <a-descriptions-item label="性别">{{personage.gender}}</a-descriptions-item>
                                    <a-descriptions-item label="生卒年月">{{(personage.bornYear ? personage.bornYear : '?') + ' - ' + (personage.diedYear ? personage.diedYear : '?')}}</a-descriptions-item>
                                    <a-descriptions-item label="活跃时期">
                                        <div style="width: 100%">
                                            <a-tag v-for="period in personage.periodArr" style="margin-bottom: 0.6em">{{period}}</a-tag>
                                        </div>
                                    </a-descriptions-item>
                                    <a-descriptions-item label="所属势力">
                                        <div style="width: 100%">
                                            <a-tag v-for="faction in personage.factionArr" style="margin-bottom: 0.6em">{{faction}}</a-tag>
                                        </div>
                                    </a-descriptions-item>
                                    <a-descriptions-item label="人物角色">
                                        <div style="width: 100%">
                                            <a-tag v-for="role in personage.roleArr" style="margin-bottom: 0.6em">{{role}}</a-tag>
                                        </div>
                                    </a-descriptions-item>
                                </a-descriptions>
                            </a-skeleton>
                            <a-skeleton :loading="false" :paragraph="{ rows: 4 }">
                                <a-typography-title :level="4" id="originalDescription" style="margin-top: 0.8em">原文描述</a-typography-title>
                                <a-typography-paragraph>
                                    <p>无</p>
                                </a-typography-paragraph>
                            </a-skeleton>
                            <a-skeleton :loading="false" :paragraph="{ rows: 4 }">
                                <a-typography-title :level="4" id="personageDeeds" style="margin-top: 0.8em">主要事迹</a-typography-title>
                                <a-typography-paragraph>
                                    <p>无</p>
                                </a-typography-paragraph>
                            </a-skeleton>
                            <a-skeleton :loading="false" :paragraph="{ rows: 4 }" v-if="personage.role != null && personage.role.includes('武将')">
                                <a-typography-title :level="4" id="combatRecords" style="margin-top: 0.8em">武将战绩</a-typography-title>
                                <a-typography-paragraph>
                                    <p>无</p>
                                </a-typography-paragraph>
                            </a-skeleton>
                            <a-skeleton :loading="false" :paragraph="{ rows: 4 }">
                                <a-typography-title :level="4" id="abilityAnalysis" style="margin-top: 0.8em">能力分析</a-typography-title>
                                <a-typography-paragraph>
                                    <p>无</p>
                                </a-typography-paragraph>
                            </a-skeleton>
                            <a-skeleton :loading="false" :paragraph="{ rows: 4 }">
                                <a-typography-title :level="4" id="netizensComments" style="margin-top: 0.8em">网友评价</a-typography-title>
                                <a-typography-paragraph>
                                    <p>无</p>
                                </a-typography-paragraph>
                            </a-skeleton>
                        </a-typography>
                    </a-col>
                    <a-col v-if="scrollWidth() >= 800" span="4" style="background-color: white;">
                        <a-anchor :affix="true" :offsetTop="30" style="margin-top: 8px; margin-left: 10px" :items="anchorItems"></a-anchor>
                    </a-col>
                </a-row>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<script>
    import {defineComponent, onMounted, reactive, toRefs} from 'vue';
    import {notification} from 'ant-design-vue';
    import {useRouter} from 'vue-router';
    import {useStore} from 'vuex';
    import {getDetail} from '@/api/record/personage';

    export default defineComponent({
        setup() {
            const state = reactive({
                // 锚点菜单
                anchorItems: [],
                // 基础信息
                personage: {
                    loading: true
                },
            });
            // 定义组件
            const router = useRouter();
            const storage = useStore();
            // 页面宽度
            const scrollWidth = () => {
                return storage.state.system.clientWidth;
            };
            // 查询详情
            const loadDetail = () => {
                // 查询参数
                let param = {
                    id: router.currentRoute.value.query.id
                };
                // 请求数据
                getDetail({param}).then(response => {
                    if (response.data.code == 200) {
                        // 获取真正返回结果
                        let data = response.data.data.data;
                        // 基础信息
                        state.personage.loading = false;
                        Object.assign(state.personage, data.recordPersonageEntity);
                        if (state.personage.period) {
                            state.personage.periodArr = state.personage.period.split(',');
                        }
                        if (state.personage.faction) {
                            state.personage.factionArr = state.personage.faction.split(',');
                        }
                        if (state.personage.role) {
                            state.personage.roleArr = state.personage.role.split(',');
                        }
                        // 锚点信息
                        state.anchorItems.push({
                            href: '#baseInfo',
                            title: '基本信息'
                        });
                        state.anchorItems.push({
                            href: '#originalDescription',
                            title: '原文描述'
                        });
                        state.anchorItems.push({
                            href: '#personageDeeds',
                            title: '主要事迹'
                        });
                        if (state.personage.role != null && state.personage.role.includes('武将')) {
                            state.anchorItems.push({
                                href: '#combatRecords',
                                title: '武将战绩'
                            });
                        }
                        state.anchorItems.push({
                            href: '#abilityAnalysis',
                            title: '能力分析'
                        });
                        state.anchorItems.push({
                            href: '#netizensComments',
                            title: '网友评价'
                        });
                    } else {
                        // 提示失败
                        requestFailed(response.data);
                    }
                }).catch((error) => {
                    // 提示失败
                    requestFailed(error);
                });
            };
            // 请求错误提示
            const requestFailed = (error) => {
                notification.error({
                    message: error.code || '-1',
                    description: error.msg || error.message || '请求出现错误，请稍后再试',
                    duration: 4
                });
            };

            // 加载页面
            onMounted(() => {
                loadDetail();
            });

            return {
                ...toRefs(state),
                scrollWidth
            };
        }
    });
</script>

<style scoped>
    .card :deep(.ant-card-body) {
        padding: 0.8em !important;
    }

    .typography :deep(.ant-descriptions-row >td) {
        padding-bottom: 0px !important;
    }

    .editInfo {
        float: right;
        color: lightgrey;
        font-style: italic;
    }
</style>
